<template>
	<view class="u-page">
		<view class="header"></view>
		<view class="content">
			<view class="userinfo">

				<view class="cell-item">
					<text class="cell-item-label">头像</text>
					<image :src="userData.avatarUrl" mode="scaleToFill"></image>
					<uni-icons type="forward" size="18" color="#818181"></uni-icons>
				</view>

				<view class="cell-item">
					<text class="cell-item-label">用户名(昵称)</text>
					<text class="cell-item-span">{{userData.nickname}}</text>
					<!-- <uni-icons type="forward" size="18" color="#818181"></uni-icons> -->
				</view>
				<view class="cell-item">
					<text class="cell-item-label">性别</text>
					<text class="cell-item-span">{{userData.gender!='1'?'女':'男'}}</text>
					<uni-icons type="forward" size="18" color="#818181"></uni-icons>
				</view>
				<view class="cell-item">
					<text class="cell-item-label">手机号</text>
					<text class="cell-item-span">{{userData.phone}}</text>
					<!-- <uni-icons type="forward" size="18" color="#818181"></uni-icons> -->
				</view>
				<view class="cell-item">
					<text class="cell-item-label">实名认证</text>
					<text class="cell-item-span">{{userData.username}}</text>
					<!-- <uni-icons type="forward" size="18" color="#818181"></uni-icons> -->
				</view>
				<!-- 		<uni-list :border="border">
					<uni-list-item title="头像" :thumb="userData.avatarUrl" thumb-size="medium"></uni-list-item>
					<uni-list-item title="用户名(昵称)" :rightText="userData.nickname"></uni-list-item>
					<uni-list-item title="性别" :rightText="userData.sex" showArrow="true"></uni-list-item>
					<uni-list-item title="手机号" :rightText="userData.phone"></uni-list-item>
					<uni-list-item title="实名认证" :rightText="userData.username"></uni-list-item>
				</uni-list> -->
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userData: {},
			}
		},
		onLoad() {
			let user = uni.getStorageSync('userData');
			this.userData = user;
			console.log('user', user.gender=='1')
			this.userInfo()

		},
		methods: {
			//获取用户信息
			async userInfo() {
				const user = await this.GQL({
					"operationName": "allSlUsers",
					"query": "query allSlUsers($filter: SlUserFilter) { allSlUsers(filter:$filter) { nodes { phoneAttestation idAttestation phone openid nickname level jurisdiction isStore uid status storeBalance balance avatarUrl phoneLssue username idCard } } }",
					"variables": {
						"filter": {
							"uid": {
								"equalTo": this.userData.uid
							}
						}
					}
				})
				if (user.data.allSlUsers.nodes[0].username != '') {
					user.data.allSlUsers.nodes[0].username = user.data.allSlUsers.nodes[0].username + "(" + user.data
						.allSlUsers.nodes[0].idCard.replace(/^(.{4})(?:\d+)(.{4})$/, "$1******$2") + ")";
				}

				this.userData = user.data.allSlUsers.nodes[0]

			},




		}
	}
</script>

<style lang="scss">
	.header {
		width: 100%;
		height: 200px;
		background: linear-gradient(#C7171E, #FBFCFE);
		/* 标准的语法 */

	}

	.content {
		position: relative;
		top: -180px;
		margin: 15px;
		background: #FFFFFF;
		height: 607px;
		border-radius: 5px;

	}

	.userinfo {
		padding: 16px;
		
		.cell-item {
			display: flex;
			align-items: center;
			padding: 10px 0;

			.cell-item-label {
				font-size: 14px;
				flex: 1;
				color: #000;
			}

			.cell-item-span {
				font-size: 14px;
				color: #767B8D;
			}

			image {
				width: 30px;
				height: 30px;
				margin-right: 8px;
			}

		}
	}
</style>
